(function($,models){
  function init(){
    $('#inputArea').empty().
    append('<h1>sequence site match</h1>').
    append('<label>please input DNA sequence:</label><textArea rows="15" cols="80" id="seq" name="seq"></textArea>');
    $('#parameterArea').empty();
    $('<input type="button" value="moreMotif" id="moreMotif" name="moreMotif" />').appendTo('#parameterArea').click(function(event){
       
       $(this).siblings('label').children('.motifquery').val('delete').attr('class','motifdelete').click(function(event){
         $(this).parent().remove();
       });

       $('<label>motif:<input type="text" class="motif" /><input type="text" class="matchcolor" /><input type="button" value="query" class="motifquery" /><br /></label>').
       insertBefore(this).
       children('.motifquery').click(function(event){
	  $(this).siblings('.motif:first').trigger('keyup');
	}).end().
       children('.motif').keyup(function(event){
	  var models=$(this).parent().parent().children('label');
	  models=getReg(models);
	  if(!models.length){
	    return;
	  }
	  findModel($('#seq').val().replace(/\s+/ig,''),models[0],$('#resultArea'),models[1]);
       }).end().
       children('.matchcolor').
       mlColorPicker({'onChange':function(value,targ){
          $(targ).css('background-color','#' + value);
       }});
     }).trigger('click');
  }
  function findModel(text,model,toDiv,colors){
    text=$.jbiotool.filterNoDNA(text).toUpperCase();
    $(toDiv).empty().append('<div>sequence length=' + text.length + '</div>');
    text=text.replace(/(.{10})/g,'$1 ').replace(/(.{66})/ig,'$1\n');
    if(!text) return;
    model=$.trim(model);
    if(model.length<2) return;
    //$(toDiv).empty().append(m + '<br />');
    //m= new RegExp('(' + m + ')','ig');
    m= new RegExp(model,'ig');
    var matchsite='';
    //$(toDiv).empty().append(text).replaceText(m,reptext + '$1</span>');
    //$(toDiv).empty().append(text).replaceText(m,rex).html();
    text=text.replace(m,rex).replace(/\n/ig,'<br \>');
    $(toDiv).append(text)
    if(matchsite){
      $(toDiv).append('<table border="1">' + matchsite + '</table>');
    }
    function rex(){
      var color;
      var tdecoration="";
      for(var i=1;i<arguments.length-2;i++){
	 if(arguments[i]){
           color=colors[parseInt((i-1)/2)].replace(/\s+/ig,'');
	   if(i % 2 ==0) tdecoration=';text-decoration:underline';
	   break;
	 } 
      }
      matchsite += '<tr><td>' + arguments[0] + '</td><td>' + arguments[arguments.length-2] + '</td></tr>'; 
      return '<span style="color:' + color + tdecoration + '">' + arguments[0] + '</span>';
    }
  }
  
  function getReg(models){
    var txt;
    txt=$.grep(models,function(v){
      return $.trim($(v).children('.motif').val()).length>1 ;
    });
    if(!txt.length) return [];

    var m=$.map(txt,function(v){
         return  toRegStr($(v).children('.motif').val()); 
       }).join("|");
    var colors=$.map(txt,function(v){
	  return $(v).children('.matchcolor').css('background-color');
	})
    return [m,colors];
  }

  function toRegStr(str){
    var m=$.trim(str);
    m='(' + m + ')|(' + $.jbiotool.getCompliment(m) + ')';
    m=$.map(m.toUpperCase().split(''),function(value){ return $.jbiotool.IUPAC[value]? $.jbiotool.IUPAC[value] + '\\s*':value;}).join(''); 
   return m;
  }

  models['REsite']={'init':init}
  models['REsite'].init();
 })(jQuery,models);
